<template>
	<view class="content">
		<view class="tips">选择兴趣爱好，个性特征，快速建立个人印象标签</view>
		<view class="tag-wrap">
			<view class="title">兴趣爱好</view>
			<view class="tag-list">
				<view :class="['tag-item', item.ischecked ? 'active' : '']" v-for="(item, index) in like_list" :key="item.id" @click="selectLike(item, index)">{{item.name}}</view>
			</view>
		</view>
		<view class="tag-wrap">
			<view class="title">个性特征</view>
			<view class="tag-list">
				<view :class="['tag-item', item.ischecked ? 'active' : '']" v-for="(item, index) in tag_list" :key="item.id" @click="selectTag(item, index)">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				tag: '',
				like_tag: '',
				tag_list: [],
				like_list: [],
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.userinfo)
			this.tag = this.userInfo.tag
			this.like_tag = this.userInfo.like_tag
		},
		onReady() {
			this.getTag();
		},
		onNavigationBarButtonTap(e) {
			let temptag = []
			let templike = []
			for (let i = 0; i < this.tag_list.length; i++) {
				if (this.tag_list[i].ischecked) {
					temptag.push(this.tag_list[i].id)
				}
			}
			for (let j = 0; j < this.like_list.length; j++) {
				if (this.like_list[j].ischecked) {
					templike.push(this.like_list[j].id)
				}
			}
			this.tag = temptag.join();
			this.like_tag = templike.join();
			if (this.tag == '') {
				uni.showToast({
					title: '请选择至少一个个性特征标签',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			if (this.like_tag == '') {
				uni.showToast({
					title: '请选择至少一个兴趣爱好标签',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			uni.showLoading({
				title: ''
			});
			this.$api.api.ajaxData({
				method: 'V1.UserTag',
				uid: this.userInfo.id,
				token: this.userInfo.token,
				tag: this.tag,
				like: this.like_tag,
			}, res => {
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					position: 'bottom',
					icon: 'none'
				});
				if (res.status) {
					uni.$emit('update_my', {
						msg: '页面更新',
					})
					uni.navigateBack({
						delta: 1
					})
				}
			}, err => {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请稍后再试',
					position: 'bottom',
					icon: 'none'
				});
			})
		},
		methods: {
			getTag: function () {
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.Tag',
					uid: this.userInfo.id,
				}, res => {
					console.log('V1.Tag',)
					uni.hideLoading();
					if (res.status) {
						this.tag_list = res.data.tag
						this.like_list = res.data.like
						let tagArr = this.tag.split(',')
						for (let i = 0; i < tagArr.length; i++) {
							for (let j = 0; j < this.tag_list.length; j++) {
								if (this.tag_list[j].id == tagArr[i]) {
									this.tag_list[j].ischecked = true
								} else {
									this.tag_list[j].ischecked = this.tag_list[j].ischecked == undefined ? false : this.tag_list[j].ischecked
								}
							}
						}
						let likeArr = this.like_tag.split(',')
						for (let k = 0; k < likeArr.length; k++) {
							for (let l = 0; l < this.like_list.length; l++) {
								if (this.like_list[l].id == likeArr[k]) {
									this.like_list[l].ischecked = true
								} else {
									this.like_list[l].ischecked = this.like_list[l].ischecked == undefined ? false : this.like_list[l].ischecked
								}
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			selectLike: function (item, index) {
				let temp = this.like_list[index]
				temp.ischecked = !temp.ischecked
				this.$set(this.like_list, index, temp)
			},
			
			selectTag: function (item, index) {
				let temp = this.tag_list[index]
				temp.ischecked = !temp.ischecked
				this.$set(this.tag_list, index, temp)
			},
			
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.tips {
		padding: 20rpx;
		font-size: 24rpx;
		color: #666;
	}
	.tag-wrap {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 10rpx;
		.title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
		}
		.tag-list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
		}
		.tag-item {
			padding: 0 20rpx;
			height: 50rpx;
			font-size: 24rpx;
			line-height: 50rpx;
			color: #999;
			border: 1rpx solid #999;
			border-radius: 50rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			&.active {
				color: #fff;
				background-color: #EE3476;
				border: 1rpx solid #EE3476;
			}
		}
	}
</style>
